<template>
	<view class="vh_100">
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<!-- 语言选择 -->
		<!-- <view @click="funsItemClick(7)">
			
		  <view class="flex itemLeft">
		    <view class="size30" style="position: absolute;top: 10vw;right: 0;left: 80vw;color: #ffffff;">{{$t('bico.W518')}}</view>
		  </view>
		</view> -->
		
			<view class="pt30 ">
				<view class="tc">
					<view class="tc_100">
						<image src="../../static/logo.png" mode="widthFix" class="wt80_100"></image>
					</view>
				</view>
				<view class="wrap">
						<u-row gutter="16">
							<u-col span="3">
								<view class=""></view>
							</u-col>
							<u-col span="3">
								<view class="bg-purple" :class="{'blue2':loginActive==0}" @tap="loginActive=0;">
									{{$t('login').l_mobile}}
								</view>
							</u-col>
							<u-col span="3">
								<view class="bg-purple" :class="{'blue2':loginActive==1}" @tap="loginActive=1;">
									{{$t('login').l_email}}
								</view>
							</u-col>
							<u-col span="3">
								<view class=""></view>
							</u-col>
						</u-row>
				</view>
				
				<!-- <view class="spdiao"></view> -->
				<view class="mt20 plr10 ptb10 radius5 bgHeader ">
					<view class="flex alcenter bdb_myblue mb10 ">
						<view class="flex  alcenter between mr10" v-if="loginActive==0">
							<view class="ft12" @click="funsItemClick(8)" >{{nationality}} +{{area_code}}</view>
							<!-- <view class="ft12" @click="showP=true" >{{array[index].country}} +{{array[index].code}}</view>
							<u-picker mode="selector" v-model="showP"  :default-selector="[0]"
							:confirm-text="confirmText" :cancel-text="cancelText"
							  @confirm="bindPickerChange" :range="array" range-key="label">
								
							</u-picker> -->
							
							<span> 丨 </span>
						</view>
						<view class="flex alcenter flex1">
							<input type="text"  v-model="user_string" class="h40 lh40  flex1 input-uni" v-if="loginActive==1" :placeholder="$t('login').p_email">
							<input type="digit" v-model="user_string" class="h40 lh40  flex1 input-uni" v-else :placeholder="$t('login').p_mobile">
							</view>
					</view>
					<view class="flex alcenter bdb_myblue mb10 ">
						<view class="flex alcenter flex1">
							<input type="password" v-model="password" @input="passwordInput1" class="h40 lh40  flex1 input-uni" :placeholder="$t('login').p_pwd">
							<view class="ft10 pt5 chengse" v-if="verifyPwd1">{{$t('login').p_len}}</view>
						</view>
					</view>
					<view class="flex alcenter bdb_myblue mb10 ">
						<view class="flex alcenter flex1">
							<input type="password" v-model="re_password" @input="passwordInput2" class="h40 lh40  flex1 input-uni" :placeholder="$t('login').p_confirmPwd">
							<view class="ft10 pt5 chengse" v-if="verifyPwd2">{{$t('login').p_notsame}}</view>
						</view>
					</view>
					<view class="flex alcenter bdb_myblue mb10 " v-show="(loginActive==0 && !smsSendBoolean)||(loginActive==1 &&!emailSendBoolean)">
						<view class="flex alcenter flex1">
							<input type="text" v-if="loginActive==0 && !smsSendBoolean" v-model="code" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').r_pmobilecode">
							<input type="text" v-if="loginActive==1 &&!emailSendBoolean" v-model="code" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').r_pemailcode">
							<view class="ml10 plr10 ptb5 radius4" @tap="getCode">
								<text v-if="!hasSend">{{$t('login').r_send}}</text>
								<text v-else>{{second}}s</text>
							</view>
						</view>
					</view>
					
					<view class="mt222 mt50 bgBlue radius5 ptb10 white ft14 tc mb10 lin" @tap="confirm()">{{$t('bico.W695')}}</view>
				    
					<navigator url="/pages/login/login"  style="background: #00b89700;color: #8495f7;border: 1px solid #8495f7;font-size: 4vw;border-radius: 8px;line-height: 2.8;margin-top: 6vw;text-align: center;">{{$t('login').login}}</navigator>
				    
					<navigator @click="funsItemClick(7)" style="background: #00b89700;color: #8495f7;border: 1px solid #8495f7;font-size: 4vw;border-radius: 8px;line-height: 2.8;margin-top: 6vw;text-align: center;">{{$t('bico.W518')}}</navigator>
				
				</view>
			</view>
			</view>
		
	</view>
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import country from '@/common/country.js'
	import {commonPhoneCode,commonGetMsg,forgetPwd,commonCheckSmsSend,commonCheckEmailSend} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return {
				confirmText:this.$t('login').c1,
				cancelText:this.$t('login').c2,
				showP:false,
				loginActive:0,
				user_string:'',
				password:'',
				re_password:'',
				code:'',
				array: country,
				index: 0,
				area_code:'1',
				hasSend:false,
				second:60,
				isRemember:false,
				verifyPwd:false,
				verifyPwd1:false,
				verifyPwd2:false,
				isShowCodeLayer:false,
				timeInterval:'',
				lang:'',
				nationality:'United States',
				smsSendBoolean:true,
				emailSendBoolean:true,
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		mounted() {
		    this.getPhone();
		},
		onLoad(e) {
			
			if(e.userString){
				this.user_string=e.userString
			}
			if(e.nationality){
				this.nationality=e.nationality
			}
			if(e.areaCode){
				this.area_code=e.areaCode
			}
			
			this.lang=uni.getStorageSync('lang');
			this.$utils.setTheme(this.theme);
			uni.setNavigationBarTitle({
				title:this.$t('login').forget_pwd
			})
			this.getSmsSend();
			this.getEmailSend()
		},
		methods:{
			getSmsSend(){
			   this.$utils.initData({url:commonCheckSmsSend,type:'post'},(res,msg)=>{
			   	this.smsSendBoolean = res == "N"
			   })
					
			 },
			 getEmailSend(){
				 this.$utils.initData({url:commonCheckEmailSend,type:'post'},(res,msg)=>{
				 	this.emailSendBoolean = res == "N"
				 })
			 },
			// 区号选择
			bindPickerChange(e){
				this.index=e.target.value;
				this.phoneItem=this.array[this.index];
				this.area_code=this.phoneItem.code;
				this.nationality=this.phoneItem.area;
			},
			//获取手机前缀
			getPhone(){
			    this.$utils.initData({url:commonPhoneCode,type:'POST'},(res,msg)=>{
					this.array=res;
			        this.phoneItem=res[0];
			    })
			},
			//路由开始
			funsItemClick(index){
				if(index==7){
				  uni.navigateTo({
				    url:'/pages/mine/lang'//语言选择
				  })
				}
				if(index==8){
					uni.navigateTo({
						//手机邀请码验证码，区号 类型
						url: '/pages/business/phoneCode?returnUrl=1002&userString='+this.user_string+'&areaCode='+this.area_code+"&nationality="+this.nationality
					})
				}
			},
			// 获取验证码
			getCode(){
				if(this.timeInterval) return;
				if(this.loginActive==0){
					if(!this.user_string){
						return this.$utils.showLayer(this.$t('login').p_taccount)
					}
					this.$utils.initData({url:commonGetMsg,type:'POST',
						data:{
							phone:this.user_string,
							code:this.area_code,
							type:this.area_code=="86"?"0":"1"
						}},(res,msg)=>{
							setTimeout(()=>{
								this.$utils.showLayer(msg);
							},100)
				
						this.hasSend=true;
						this.timeInterval=setInterval(()=>{
							if(this.second>=1){
								this.second--;
							}else{
								this.hasSend=false
								clearInterval(this.timeInterval);
							}
						},1000)
					})
				}else{
					if(!this.$utils.checkEmail(this.user_string)){
						return this.$utils.showLayer(this.$t('login').p_temail)
					}
					this.$utils.initData({url:commonGetMsg,type:'POST',
						data:{
							email:this.user_string,
							code:this.area_code,
							type:this.phoneItem.type
						}},(res,msg)=>{
							setTimeout(()=>{
								this.$utils.showLayer(msg);
							},100)
				
						this.hasSend=true;
						this.timeInterval=setInterval(()=>{
							if(this.second>=1){
								this.second--;
							}else{
								this.hasSend=false
								clearInterval(this.timeInterval);
							}
						},1000)
					})
				}
			},
			// 下一步
			goNext(){
				if(this.loginActive==1){
					// 邮箱登录
					if(!this.$utils.checkEmail(this.user_string)){
						return this.$utils.showLayer(this.$t('login').p_temail)
					}
				}else{
					if(!this.user_string){
						return this.$utils.showLayer(this.$t('login').p_taccount)
					}
				}
				this.isShowCodeLayer=true;
				this.hasSend=false;
				this.timeInterval='';
				this.code='';
			},
			// 密码框输入判断提示
			passwordInput(e){
				this.hasSend=false;
				if(e.target.value.length<6){
					this.verifyPwd=true;
				}else{
					this.verifyPwd=false;
				}
			},
			passwordInput1(e){
				if(e.target.value.length<6){
					this.verifyPwd1=true;
				}else{
					this.verifyPwd1=false;
				}
			},
			passwordInput2(e){
				if(e.target.value!=this.password){
					this.verifyPwd2=true;
				}else{
					this.verifyPwd2=false;
				}
			},
			// 确定
			confirm(){
				if(this.loginActive==1){
					// 邮箱登录
					if(!this.$utils.checkEmail(this.user_string)){
						return this.$utils.showLayer(this.$t('login').p_temail)
					}
				}else{
					if(!this.user_string){
						return this.$utils.showLayer(this.$t('login').p_taccount)
					}
				}
				if(!this.password){
					return this.$utils.showLayer(this.$t('login').p_pwd)
				}
				if(this.password.length<6){
					return this.$utils.showLayer(this.$t('login').p_simple)
				}
				if(this.password!=this.re_password){
					return this.$utils.showLayer(this.$t('login').p_inputagain)
				}
				var data={
					account: this.user_string,
					password: this.password,
					confirmPwd:this.re_password,
					//type:this.phoneItem.code,
					msg : this.code
				}
				var url=forgetPwd
				
				this.$utils.initDataToken({url,data,type:'get'},(res,msg)=>{
					// this.$utils.showLayer(msg);
				
					setTimeout(()=>{
						this.$utils.showLayer(msg);
					},100)
					this.isShowCodeLayer=false;
					setTimeout(()=>{
						uni.navigateBack({
							delta:2
						})
					},1000)
				})
			}
		}
	}
</script>

<style>
.vh_100 {
	padding: 0vw 0 0 0;
	background: linear-gradient(-45deg, #0d25a9, #1a31a9, #0d2296, #0f2394);
	height: 300px;
	background-size: 100%;
}
.mt20 {
    margin-top: 6vw;
        background-color: #fff;
        position: relative;
        z-index: 9;
        border-radius: 15px 15px 0 0;
        height: 52px;
}
.mt222{
	margin-top: 6vw;
}
.plr10 {
    padding-left: 8vw;
    padding-right: 8vw;
}
.tc_100 {

    width: 25vw;
    height: 25vw;
    overflow: hidden;
    border: 1vw solid #ffffff00;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.wt80_100 {
    width: 25vw!important;
}

.tc_110 {
    padding-left: 22vw;
    padding-right: 20vw;
    align-items: center;
}
.ft16 {
    font-size: 4vw;
}

.plr15 {
    padding-left: 4vw;
    padding-right: 4vw;
    width: 50vw;
}

.pt30 {
    padding-top: 25vw;
}
.bgBlue {
    background: #2196F3;
}
.ft12 {
    font-size: 4vw;
}
* {
    
    font-size: 4vw;
}
.uni-picker-container .uni-picker-action {

    font-size: 4vw;

}

uni-page-body {
    color: #8f9ada;
    
}

.bg-purple {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.spdiao {
    height: 40px;
    background: #FFF;
    border-radius: 14px 14px 0px 0px;
    position: relative;
    top: 7vw;
}
.bgBlueui {
    background: #f7f7f7;
}

uni-switch .uni-switch-input.uni-switch-input-checked:after {
    -webkit-transform: translateX(20px);
    transform: translateX(28px);
}

.mbwjmm {
    color: #30313369;
}
</style>
